<template>
  <div class="box">
    <!-- <div class="content-title">AI鞋楦匹配</div> -->
    <div :class="['toolBox', isShow22 ? 'toolBox-active' : '']">
      <div class="title" @click="isShow22 = true">
        积木式工具箱
        <!-- <i class="iconfont iconxiala" @click="isShow22 = true" /> -->
      </div>
      <div class="toolBox-bottom" v-if="isShow22">
        <!-- <el-button @click="upload" type="warning" size="large">上传图片</el-button> -->
        <VueDraggable
          id="drag1"
          :group="{ name: 'a', pull: 'clone', put: false }"
          :animation="150"
          v-model="list1"
          style="display: flex; margin-top: 5px"
        >
          <el-tag
            v-for="(item, index) in list1"
            :type="item.type"
            size="large"
            :key="index"
            style="
              background: rgb(56, 56, 56);
              color: #fff;
              border: 2px solid #979797;
            "
          >
            <div>{{ item.name }}</div>
          </el-tag>
        </VueDraggable>
      </div>
    </div>

    <div class="content">
      <div style="display: flex">
        <div
          class="botton-compact"
          style="display: flex; align-items: center; width: 300px"
        >
          <div
            style="
              font-size: 30px;
              border-bottom: 5px solid #42a5ff;
              color: #42a5ff;
            "
          >
            Step 1
          </div>
          <div style="font-size: 24px; margin-left: 20px">上传脚型图片</div>
          <!-- <img
            src="../../../assets/jiantou.png"
            style="width: 150px; height: 30px; margin-right: -100px"
          /> -->
        </div>
        <!-- <div class="botton-compact" style="display: flex; align-items: center">
          <div>② 预处理模块</div>
          <img
            src="../../../assets/jiantou.png"
            style="width: 150px; height: 30px; margin-right: -150px"
          />
        </div> -->
        <div
          class="botton-compact"
          style="display: flex; align-items: center; flex: 1"
        >
          <div
            style="
              font-size: 30px;
              border-bottom: 5px solid #42a5ff;
              color: #42a5ff;
            "
          >
            Step 2
          </div>
          <div style="font-size: 24px; margin-left: 20px">选择识别算法</div>
          <!-- <img
            src="../../../assets/jiantou.png"
            style="width: 200px; height: 30px; margin-right: -150px"
          /> -->
        </div>
        <div
          class="botton-compact"
          style="display: flex; align-items: center; width: 380px"
        >
          <div
            style="
              font-size: 30px;
              margin-left: 20px;
              color: #42a5ff;
              border-bottom: 5px solid #42a5ff;
            "
          >
            匹配结果
          </div>
        </div>
      </div>

      <div class="content-box">
        <div class="content-upload1">
          <div class="upload-demo" v-if="demo">
            <div @click="upload" class="uploader">
              <el-image
                v-if="imageUrl"
                :src="imageUrl"
                style="width: 100%; max-height: 360px; margin: auto"
              />
              <div v-else style="margin: auto">
                <i
                  class="iconfont icontupianshangchuan"
                  style="color: #fff; font-size: 40px"
                />
              </div>
            </div>
            <input id="getimg" type="file" @change="handleFileChange" />
          </div>

          <div class="upload-demo1" v-if="!demo">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="这里请上传外足弓图片"
              placement="left"
            >
              <div
                class="iconfont iconshuzi2"
                style="font-size: 40px; color: #409eff"
              />
            </el-tooltip>
            <div @click="upload1" class="uploader">
              <el-image
                v-if="imageUrl1"
                :src="imageUrl1"
                class="upload-image"
              />
              <div v-else style="margin: auto">
                <el-icon style="color: aqua">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <input id="getimg1" type="file" @change="handleFileChange1" />
          </div>

          <div class="upload-demo1" v-if="!demo">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="这里请上传内足弓图片"
              placement="left"
            >
              <div
                class="iconfont iconshuzi-"
                style="font-size: 40px; color: #409eff"
              />
            </el-tooltip>
            <div @click="upload2" class="uploader">
              <el-image
                v-if="imageUrl2"
                :src="imageUrl2"
                class="upload-image"
              />
              <div v-else style="margin: auto">
                <el-icon style="color: aqua">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <input id="getimg2" type="file" @change="handleFileChange2" />
          </div>

          <div class="upload-demo1" v-if="!demo">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="这里请上传脚底图片"
              placement="left"
            >
              <div
                class="iconfont iconshuzi"
                style="font-size: 40px; color: #409eff"
              />
            </el-tooltip>
            <div @click="upload3" class="uploader">
              <el-image
                v-if="imageUrl3"
                :src="imageUrl3"
                class="upload-image"
              />
              <div v-else style="margin: auto">
                <el-icon style="color: aqua">
                  <Plus />
                </el-icon>
              </div>
            </div>
            <input id="getimg3" type="file" @change="handleFileChange3" />
          </div>

          <!-- <div style="">
            <el-button
              style="
                font-size: 30px;
                font-weight: 900;
                padding: 30px;
                background: linear-gradient(
                  135deg,
                  #2fb0ff,
                  #b863fb
                ) !important;
                border: none;
                margin-top: 10px;
              "
              type="info"
              size="large"
              @click="upload"
              >上传图片</el-button
            >
          </div> -->
        </div>

        <div class="content-upload1" style="margin: 0 10px">
          <div
            style="
              width: 100%;
              height: 504px;
              display: flex;
              flex-direction: column;
            "
          >
            <div class="absolute">
              <VueDraggable
                id="drag2"
                :group="{ name: 'a' }"
                :animation="150"
                v-model="list2"
                style="display: flex; flex-wrap: wrap"
                @sort="sotr"
              >
                <el-tag
                  @close="handleClose(item)"
                  closable
                  v-for="item in list2"
                  :type="item.type"
                  :key="item"
                  style="
                    background: rgb(56, 56, 56);
                    color: #fff;
                    border: 3px solid #fff;
                    background: linear-gradient(#383838, #383838) padding-box,
                      linear-gradient(135deg, #2fb0ff, #b863fb) border-box;
                    border: 3px solid transparent;
                    font-weight: 900;
                  "
                  >{{ item.name }}</el-tag
                >
              </VueDraggable>
              <div style="padding-top: 20px">
                <img
                  v-if="showRes && imageUrl != ''"
                  :src="require(`../../../img/鞋楦/${afterDealUrl}`)"
                  width="300px"
                />
              </div>
            </div>

            <div v-show="preShow" class="footPreview">
              <div
                style="max-width: 150px; max-height: 140px; margin-bottom: 10px"
              >
                <img
                  v-if="imageUrl1 && list2.length != 0"
                  src="../../../img/1.png"
                  style="width: 100%; height: 100%"
                />
                <img
                  v-if="imageUrl1 && list2.length == 0"
                  src="../../../assets/jiantou.png"
                />
              </div>
              <div style="width: 150px; height: 140px; margin-bottom: 10px">
                <img
                  v-if="imageUrl2 && list2.length != 0"
                  src="../../../img/2.png"
                  style="width: 100%; height: 100%"
                />
                <img
                  v-if="imageUrl2 && list2.length == 0"
                  src="../../../assets/jiantou.png"
                />
              </div>
              <div style="width: 150px; height: 140px; margin-bottom: 10px">
                <img
                  v-if="imageUrl3 && list2.length != 0"
                  src="../../../img/3.png"
                  style="width: 100%; height: 100%"
                />
                <img
                  v-if="imageUrl3 && list2.length == 0"
                  src="../../../assets/jiantou.png"
                />
              </div>
            </div>
          </div>
          <!-- <el-button
            style="font-size: 20px; margin-top: 10px"
            type="info"
            size="large"
            @click="preShow = true"
            >开始预处理</el-button
          > -->
        </div>

        <div class="content-upload">
          <div class="upload-demo">
            <el-select
              v-model="identificationValue"
              placeholder="选择识别算法"
              size="large"
              style="width: 240px"
              @change="change"
            >
              <el-option
                v-for="item in identification"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>

            <!-- <el-menu
              :collapse="isCollapse"
              style="background-color: #383838; transform: scale(1.2)"
            >
              <el-sub-menu>
                <template #title>
                  <div id="type">选择识别方式</div>
                </template>
                <el-menu-item
                  v-for="(item, index) in identification"
                  :key="item"
                  @click="change(item.name)"
                  style="
                    background-color: #18191b;
                    font-size: 20px;
                    font-weight: 900;
                  "
                >
                  <div style="color: #eeeeee">
                    {{ item.name }}
                  </div>
                </el-menu-item>
              </el-sub-menu>
            </el-menu> -->
          </div>
          <el-button
            style="
              font-size: 30px;
              font-weight: 900;
              padding: 30px;
              background: linear-gradient(135deg, #2fb0ff, #b863fb);
              border: none;
            "
            type="info"
            size="large"
            @click="identificate"
            >开始识别</el-button
          >
        </div>

        <div class="content-res">
          <div style="display: flex">
            <img
              v-if="loading"
              style="width: 230px; height: 230px; margin-top: 90px"
              :src="require(`../../../img/鞋楦/222.gif`)"
            />
            <img
              v-if="loading"
              style="width: 150px"
              :src="require(`../../../img/鞋楦/111.gif`)"
            />
          </div>

          <!-- <div class="auto-scroll-container" v-if="loading">
            <div class="scroll-list">
              <img
                v-for="(img, index) in scrollImages"
                :key="index"
                :src="require(`../../../img/鞋楦/${img}`)"
                class="scroll-item"
              />
            </div>
          </div> -->
          <div style="width: 380px">
            <div
              v-if="identificated"
              style="
                width: 380px;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div
                class="res"
                style="
                  border: 2px solid #fff;
                  background: linear-gradient(#000, #000) padding-box,
                    linear-gradient(135deg, #2fb0ff, #b863fb) border-box;
                  border: 2px solid transparent;
                  border-radius: 10px;
                  color: #e5eaf3;
                  font-size: 32px;
                  width: 200px;
                  height: 60px;
                  line-height: 60px;
                  margin: 20px 0;
                "
              >
                <div v-if="showRes">希腊脚</div>
                <div v-else>罗马脚</div>
              </div>
              <div class="res" style="height: auto">
                <div v-if="showRes">
                  <img
                    src="../../../img/鞋楦/xx1.png"
                    width="300"
                    height="250"
                  />
                  <div
                    style="
                      background: linear-gradient(135deg, #2fb0ff, #b863fb);
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                      font-size: 28px;
                      line-height: 60px;
                    "
                  >
                    鞋楦编号：A2871
                  </div>
                  <div
                    style="
                      background: linear-gradient(135deg, #2fb0ff, #b863fb);
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                      font-size: 28px;
                      line-height: 60px;
                    "
                  >
                    匹配度：<span style="font-size: 42px">85.6%</span>
                  </div>
                </div>
                <div v-else>
                  <img src="../../../img/鞋楦/xx2.png" width="250" />
                  <div
                    style="
                      background: linear-gradient(135deg, #2fb0ff, #b863fb);
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                      font-size: 28px;
                      line-height: 60px;
                    "
                  >
                    鞋楦编号：A2049
                  </div>
                  <div
                    style="
                      background: linear-gradient(135deg, #2fb0ff, #b863fb);
                      background-clip: text;
                      -webkit-text-fill-color: transparent;
                      font-size: 28px;
                      line-height: 60px;
                    "
                  >
                    匹配度：<span style="font-size: 60px">57.2%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { VueDraggable } from "vue-draggable-plus";

export default {
  components: {
    Plus,
    VueDraggable,
  },
  data() {
    return {
      //展示图片个数
      demo: true,
      //延时
      loading: false,
      //正在选择的
      choosing: "",
      showerror: false,
      showRes: false,
      afterDealUrl: "4.png",
      isShow22: false,
      list1: [
        {
          type: "primary",
          name: "灰度处理",
        },
        {
          type: "success",
          name: "图片旋转",
        },
        {
          type: "primary",
          name: "图片压缩",
        },
        {
          type: "success",
          name: "曝光处理",
        },
        {
          type: "primary",
          name: "背景去除",
        },
        {
          type: "success",
          name: "亮度提升",
        },
        {
          type: "primary",
          name: "随机裁剪",
        },
        {
          type: "primary",
          name: "高斯滤波",
        },
        {
          type: "warning",
          name: "查看更多",
        },
      ],
      preShow: false, // 预处理后的图片的显示控制
      list2: [],
      //图片链接
      scrollImages: [
        "xx1.png",
        "xx2.png",
        "xx3.png",
        "xx4.png",
        "xx5.png",
        "xx6.png",
        "xx1.png",
        "xx2.png",
        "xx3.png",
        "xx4.png",
        "xx5.png",
        "xx6.png",
      ].concat([
        "xx1.png",
        "xx2.png",
        "xx3.png",
        "xx4.png",
        "xx5.png",
        "xx6.png",
      ]),
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      //展示结果的图片
      dialogImageUrl: "src/img/希腊脚.png",
      //是否展示结果
      identificated: false,
      //模型数据
      identification: [
        {
          value: "简单机器学习",
          name: "简单机器学习",
        },
        {
          value: "卷积神经网络",
          name: "卷积神经网络",
        },
        {
          value: "视觉自注意力模型",
          name: "视觉自注意力模型",
        },
        {
          value: "DeepSeek大模型",
          name: "DeepSeek大模型",
        },
      ],
      identificationValue: "",
    };
  },
  methods: {
    sotr() {
      this.list2 = Array.from(
        new Set(this.list2.map((item) => JSON.stringify(item)))
      ).map((item) => JSON.parse(item));
    },
    //修改模型
    change(a) {
      // document.getElementById("type").innerText = a;
      this.choosing = a;
      if (a == this.identification[0].name) {
        this.demo = true;
        this.imageUrl1 = "";
        this.imageUrl2 = "";
        this.imageUrl3 = "";
      }
      if (a == this.identification[1].name) {
        // this.demo = false;
        // this.imageUrl = "";
      }
    },
    //展示结果
    identificate() {
      this.loading = true;
      this.identificated = false;
      let t = 0;
      if (this.choosing == this.identification[0].name) {
        t = 2000;
      } else if (this.choosing == this.identification[1].name) {
        t = 6000;
      }
      console.log("执行", t);
      setTimeout(() => {
        this.loading = false;
        this.identificated = true;
        if (this.list2.length > 0) {
          console.log(this.list2);

          if (this.list2[0].name == "曝光处理") {
            this.afterDealUrl = "55.png";
          } else {
            this.afterDealUrl = "55.png";
          }
          this.showRes = true;
        } else {
          this.showRes = false;
        }
      }, t);
    },

    upload() {
      // imageUrl.value = 'src/img/希腊脚.png'
      document.getElementById("getimg").click();
      let div = document.getElementsByClassName("uploader");
      div[0].style.backgroundColor = "#000000";
      console.log(div);

      console.log("上传图片");
    },

    upload1() {
      // imageUrl.value = 'src/img/希腊脚.png'
      document.getElementById("getimg1").click();
      let div = document.getElementsByClassName("uploader");
      div[0].style.backgroundColor = "#3a3b3d";
      console.log(div);

      console.log("上传图片");
    },
    upload2() {
      // imageUrl.value = 'src/img/希腊脚.png'
      document.getElementById("getimg2").click();
      let div = document.getElementsByClassName("uploader");
      div[1].style.backgroundColor = "#3a3b3d";
      console.log(div);

      console.log("上传图片");
    },
    upload3() {
      // imageUrl.value = 'src/img/希腊脚.png'
      document.getElementById("getimg3").click();
      let div = document.getElementsByClassName("uploader");
      div[2].style.backgroundColor = "#3a3b3d";
      console.log(div);

      console.log("上传图片");
    },

    // 处理文件选择
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl = URL.createObjectURL(file);
      }
    },

    handleFileChange1(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl1 = URL.createObjectURL(file);
      }
    },
    handleFileChange2(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl2 = URL.createObjectURL(file);
      }
    },
    handleFileChange3(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl3 = URL.createObjectURL(file);
      }
    },

    handleClose(tag) {
      this.list2.splice(this.list2.indexOf(tag), 1);
    },
  },
};
</script>

<style >
.box .el-select__wrapper {
  width: 250px;
  height: 50px;
  font-size: 24px !important;
  font-weight: 500;
}
.box .el-select__selected-item {
  color: #fff !important;
  font-weight: 600;
}
.el-select-dropdown__item {
  font-size: 24px !important;
  height: 50px !important;
  line-height: 50px !important;
  font-weight: 600;
}
</style>
<style scoped lang="scss">
input {
  visibility: hidden;
  /* opacity:0; */
  position: absolute;
  left: 100px;
  top: 210px;
}

.uploader {
  width: 100%;
  height: 100%;
  // background-color: #212121;
  border: 2px solid #979797;
  display: flex;
  align-content: center;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

.upload-image {
  width: 150px;
  height: 140px;
  margin: auto;
  flex-shrink: 0;
}

#drag1 .el-tag {
  margin: 0 10px;
}

#drag2 .el-tag {
  margin: 10px;
}

.absolute {
  width: 300px;
  flex: 2;
  border-radius: 8px;
  border: 2px solid #979797;
  // margin-left: 40px;

  .el-tag {
    width: 120px;
    height: 120px;
    font-size: 22px;

    &:hover {
      transform: scale(1.1);
      transition: all 0.3s ease;
      box-shadow: 0 0 5px #000000;
    }
  }
}

.footPreview {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

el-menu-item {
  background-color: rgb(104, 91, 113);
}

#type {
  color: #eeeeee;
  font-weight: bold;
  font-size: 22px;
}

.box {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.toolBox {
  background: linear-gradient(135deg, rgb(47, 176, 255), rgb(184, 99, 251));
  width: 100px;
  height: 80px;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  border-radius: 50px;
  padding-top: 20px;
  transition: all 2s ease;
}
.toolBox-active {
  display: flex;
  flex-direction: column;
  background: #212121;
  border-radius: 10px;
  align-self: center;
  margin: 0 20px 10px 20px;
  width: 100%;
  height: 150px;
  font-size: 38px;
  line-height: 50px;
  padding-top: 10px;
  .title {
    align-self: start;
    color: #42a5ff;
    padding-left: 20px;
  }
}

.title {
  align-self: center;
  // font-size: 44px;
  color: #eeeeee;
  font-weight: 900;
}

.toolBox-bottom {
  // margin: 10px;
}

.toolBox-bottom .el-tag {
  width: 120px;
  height: 80px;

  &:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
    box-shadow: 0 0 5px #000000;
  }
}

.toolBox-bottom .el-tag div {
  font-size: 22px;
  font-weight: 900;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}

.content-title {
  align-self: center;
  font-size: 50px;
  font-weight: 900;
  background: linear-gradient(135deg, #2fb0ff, #b863fb);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content-box {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.content-upload1 {
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
}

.content-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 500px;
}

.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1;
}

.upload-demo1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.botton-compact {
  //   margin-right: 50px;
  height: 50px;
  justify-content: center;
  // flex: 1;
  div {
    font-weight: bold;
    font-size: 40px;
    color: #eeeeee;
  }
}

.identification-content {
  width: 300px;
  margin-top: 100px;
}

.identification-title {
  font-weight: bold;
  font-size: 30px;

  color: #eeeeee;
}

.content-identification {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-left: 100px;
}

.content-res {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-self: self-start;

  .res {
    width: 100%;
    height: 80px;
    color: #f67d0c;
    font-size: 48px;
    line-height: 80px;
    text-align: center;
    font-weight: 900;
  }
}

.res-title {
  color: #eeeeee;
  font-size: 30px;
  font-weight: bold;
}

.res-img {
  margin-top: 80px;
}

.res-content {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.res-content-title {
  color: #eeeeee;
  align-self: center;
  font-size: 28px;
}
</style>

<style scoped>
.auto-scroll-container {
  height: 500px;
  overflow: hidden;
  position: relative;
  margin: 20px 0;
}

.scroll-list {
  height: 1000px;
  animation: scroll 4s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%);
  }
}

.scroll-item {
  width: 150px;
  height: auto;
  display: block;
  margin: 10px 0;
}
</style>